<template>
<div class="herder">
<span class="iconfont">&#xe631;</span>
</div>

 <div class="banner">
     <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi4%2F152480661%2FO1CN01WCVvc21GkmSd9HCUh_%21%210-item_pic.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654438725&t=9736789131070b8874d1c27aec8fec28" alt="">
     <p class="user_name">热心市民李先生
         <span class="star">
             <span class="iconfont">&#xe634;</span>
             <span class="num">16</span>
         </span>
         </p>
     <p class="user_id">ID: 1069643013</p>

     <div class="banner_bottom">
       <ul class="banner_bottom_ul">
           <li><p>红包</p><p>218</p></li>
           <li><p>优惠劵</p><p>12张</p></li>
           <li><p>鲜豆</p><p>88</p></li>
           <li><p>白条</p><p>1000</p></li>
       </ul>
     </div>
 </div>

<div class="main">
 <ul class="main_ul">
     <li class="main_li"><span class="iconfont money">&#xe632;</span>我的钱包<span class="iconfont">&#xe601;</span></li>
     <li class="main_li"><span class="iconfont address">&#xe681;</span>我的地址<span class="iconfont">&#xe601;</span></li>
     <li class="main_li"><span class="iconfont help">&#xe698;</span>帮助与客服<span class="iconfont">&#xe601;</span></li>
 </ul>
</div>

  <Tabber show=3></Tabber>
</template>

<script>
import Tabber from '../../components/tabber/tabber.vue'
export default {
  name: 'My',
  components: {
    Tabber
  }
}
</script>

<style lang='scss' scoped>
.herder{
    height: 2.5rem;
    background-image: linear-gradient(239deg, #3A6FF3 0%, #50C7FB 100%);
    border-radius: 0 0 50% 50%;
    text-align: right;
    .iconfont{
        display: inline-block;
        font-size: .25rem;
        color: #ffffff;
        padding: .37rem .21rem 0 0;
    }
}
.banner{
    width: 3.39rem;
    height: 2.03rem;
    background: #FFFFFF;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
    border-radius: 8px;
    position: absolute;
    top: 1.08rem;
    left: 0;
    right: 0;
    margin: auto;
    img{
        width: .94rem;
        height: .94rem;
        border-radius: 50%;
        position: absolute;
        top: -0.47rem;
        left: 0;
        right: 0;
        margin: auto;
    }
    .user_name{
        width: 100%;
        font-size: .24rem;
        color: #262628;
        position: absolute;
        top: .4rem;
        text-align: center;
        .star{
        display: inline-block;
        width: .35rem;
        height: .15rem;
        background-image: linear-gradient(180deg, #BEE700 0%, #8ACA00 100%);
        border-radius: 100px;
        position: absolute;
        top: .08rem;
        right: .37rem;
        font-size: .12rem;
        .iconfont{
            font-size: .12rem ;
            background: #FFC700;
            border-radius: 50%;
            position: absolute;
            top: .01rem;
            left: .05rem;
            transform: scale(.8);
        }
        .num{
            display: inline-block;
            transform: scale(.8);
            position: absolute;
            top: .01rem;
            right: .04rem;
        }
        }
    }
    .user_id{
        width: 100%;
        font-size: .14rem;
        color: #C1C0C9;
        position: absolute;
        top: .87rem;
        text-align: center;
    }
}
.banner_bottom{
    width: 100%;
    height: .76rem;
    position: absolute;
    bottom: 0;
    border-top: 1px solid #f1f1f1;
    &_ul{
        box-sizing: border-box;
        height: 100%;
      display: flex;
      justify-content: space-between;
      padding: .16rem .28rem;
      p{
          margin: 0;
      }
      li{
          text-align: center;
      }
      li>p:first-child{
         font-size: .12rem;
         color: #C1C0C9;
         margin-bottom: .08rem;
      }
      li>p:last-child{
          font-size: .2rem;
          color: #262628;
      }
    }
}
.main{
    padding: .77rem .27rem .49rem;
    &_ul{
        height: 1.46rem;
       background: #FFFFFF;
       box-shadow: 0 .08rem .16rem 0 rgba(0,0,0,0.08);
       border-radius: .08rem;
       padding: .16rem;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
    }
    &_li{
      font-size: .16rem;
      color: #262626;
      position: relative;
      span:first-child{
          display: inline-block;
          width: .3rem;
          height: .3rem;
          border-radius: .08rem;
          color: #ffffff;
          text-align: center;
          line-height: .3rem;
          margin-right: .12rem;
      }
      span:last-child{
          display: inline-block;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%) rotate(180deg);
      }
      .money{
          background-color: #ED4A47;
      }
      .address{
          background-color: #32C5FF;
      }
      .help{
         background-color: rgba(144,19,254,0.92)
      }
    }
}
</style>
